<template>
	<li class="collectShow">
		<img :src="fruitImg" alt="订单图">
		<div class="jieshao">
			<p class="jieshao-name">{{fruitName}}</p>
			<p class="jieshao-con">{{fruitCon}}</p>
			<p>
				<span class="pink jieshao-price">￥</span>
				<span class="pink jieshao-price">{{fruitPrice}}</span>
				<span class="under">￥40.00</span>
				<i class="el-icon-shopping-cart-2"></i>
			</p>
		</div>
		<p id="cancel">
			<buttShowCang msg="取消收藏" @fun="click(index)" v-if="!isShow"></buttShowCang>
			<buttShowCang msg="已失效" v-if="isShow" class="reday"></buttShowCang>
		</p>
		
	</li>
</template>

<script>
	// 引入按钮小组件
	import buttShowCang from "@/components/buttShowCang.vue";
    import Qs from 'qs';
	export default {
		components: {
			buttShowCang
		},
		data(){
			return{
				isShow: false,
			}
		},
		props:{
			fruitName:String,
			fruitCon:String,
			fruitPrice:Number,
			fruitImg:String,
			index:Number
		},
		methods:{
			click(index){
				window.console.log(index)
				this.isShow = !this.isShow;
				let  data = Qs.stringify({"id": index,'ad':'0'});
				this.$axios({
					method: 'post',
					data:data,
					url: 'http://localhost:3000/recentlook/change',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((response) => {
					window.console.log(response.data)
					
				}).catch(function(error) {
					window.console.log(error)
				});	
			}
		}
	}
</script>

<style>
	.collectShow{
		width:28.5%;
		border:1px solid #E7E7E7;
		margin-left:3.325%;
		margin-top:40px;
		
	}
	.jieshao{
		margin-left:7%;
		color:#707070;
	}
	.collectShow img{width:100%;}
	.pink{
		color:#ff8989;
	}
	.under{
		text-decoration: line-through;
		color:#949494;
		margin-left:9%;
		margin-right: 27%;
	}
	.el-icon-shopping-cart-2{
		color:#f4a74c;
		font-size: 25px;
		text-align: right;
	}
	#cancel{
		text-align: center;
		margin-top:20px;
		margin-bottom: 20px;
	}
	.jieshao-name{
		font-size: 17px;
		margin-bottom: 15px;
	}
	.jieshao-con{
		font-size: 12px;
		margin-bottom: 15px;
		color:#949494;
	}
	.jieshao-price{
		font-weight: bold;
		font-size: 17px;
	}
	.reday{
		background:#999;
	}
</style>
